<template>
<div id="box">
    <div class="content">
        <div class="title">
            <div class="title_title">{{data.name}}</div>
            <div class="title_dic">
                <div v-for=" i in data.children" :key="i.id">{{i.name}}</div>
            </div>
            <div class="title_all">查看全部></div>
        </div>
        <div class="items">
            <div class="items_left">
                <img v-lazy="data.goods[0].picture" alt="">
                <div class="items_left_dic">
                    <div>{{data.name}}</div>
                    <div>三折起狂欢</div>
                </div>
            </div>
            <div class="items_right">
                <div class="item" @click="gotoDic(i.id)" v-for="(i,index) in data.goods" :key="i.id" v-if="index<8" >
                    <div class="item_img">
                        <img v-lazy="i.picture" alt="">
                    </div>
                    <div class="item_dic">
                        <div>{{i.name}}</div>
                        <div>{{str(i.desc)}}</div>
                        <div>￥{{i.price}}</div>
                    </div>
                    <div class="item_bottom">
                        <div>找相似</div>
                        <div>发现更多宝贝></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    props:["data"],
    mounted(){

    },
    methods:{
        gotoDic(a){
            this.$router.push({
                name:"detail",
                params:{
                id:a
                }
            })
        },
        str(a){
            if(a.length > 10){
                return a.slice(0,10) + "..."
            }else{
                return a
            }
        }
    }
}
</script>

<style lang="less" scoped>
#box{
    width: 100%;
    height: 725px;
    .content{
        width: 1240px;
        height: 100%;
        margin:0 auto;
        .items{
            width:1240px;
            height: 610px;
            display: flex;
            .items_left{
                margin-right:10px;
                width: 240px;
                height: 610px;
                position: relative;
                img{
                    display: block;
                    width: 240px;
                    height: 610px;
                }
                .items_left_dic{
                    display: flex;
                    position: absolute;
                    top:50%;
                    left:0;
                    width: 190px;
                    height: 65px;
                    color:white;
                    font-size:18px;
                    & :nth-child(1){
                        background: rgba(0,0,0,.5);
                        width: 75px;
                        height: 65px;
                        text-align: center;
                        line-height: 65px;
                    }
                    & :nth-child(2){
                        background: rgba(0,0,0,.3);
                        width: 110px;
                        height: 65px;
                        text-align: center;
                        line-height: 65px;
                    }
                }
            }
            .items_right{
                width: 990px;
                height: 610px;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                .item{
                    &:hover{
                        border: 1px solid rgb(39, 186, 155);
                    }
                    &:hover .item_bottom{
                        height: 86px;
                    }
                    width: 240px;
                    height: 300px;
                    position: relative;
                    padding: 10px 30px;
                    overflow: hidden;
                    border-width: 1px;
                    border-style: solid;
                    border-color: transparent;
                    border-image: initial;
                    transition: all 0.5s ease 0s;
                    .item_bottom{
                        position: absolute;
                        transition: .3s;
                        left: 0px;
                        bottom: 0px;
                        height: 0px;
                        width: 100%;
                        text-align: center;
                        font-size:18px;
                        // transform: translate3d(0px, 100%, 0px);
                        background: rgb(39, 186, 155);
                        transition: all 0.5s ease 0s;
                        & :nth-child(1){
                            font-size: 18px;
                            line-height: 40px;
                            margin:0 auto;
                            margin-top: 5px;
                            width: 120px;
                            color:white;
                            border-bottom: 1px solid rgb(255, 255, 255);
                        }
                        & :nth-child(2){
                            display: block;
                            color: rgb(255, 255, 255);
                            width: 120px;
                            line-height: 30px;
                            margin: 0px auto;
                            font-size: 16px;
                        }
                    }
                    .item_dic{
                        & :nth-child(1){
                            margin-top: 6px;
                            font-size: 16px;
                            height: 44px;
                        }
                        & :nth-child(2){
                            margin-top: 6px;
                            font-size: 16px;
                            color:rgb(102,102,102)
                        }
                        & :nth-child(3){
                            margin-top: 10px;
                            font-size: 20px;
                            color:red;
                        }
                    }
                    .item_img{
                        display: block;
                        width: 160px;
                        height: 160px;
                        margin: 0px auto;
                        img{
                            max-width: 100%;
                            max-height: 100%;
                            vertical-align: middle;
                        }
                    }
                }
            }
        }
        .title{
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding:40px 10px;
            .title_title{font-size:32px}
            .title_dic{
                display: flex;
                font-size:16px;
                div{
                    padding: 2px 12px;
                    font-size: 16px;
                    border-radius: 4px;
                    &:hover{
                         background: #27ba9b;
                         color: #fff;
                    }
                }
            }
            .title_all{
                font-size: 16px;
                color:rgb(153,153,153);
            }
        }
    }
}
</style>